<template>
  <div>
    <div>
      <div class="pt-2 pb-2">
        <el-button type="primary" size="mini" @click="addDictionary">添加</el-button>
      </div>
    </div>
    <div>
      <tabs :keyData="tabHeader" :tableData="tabDate">
        <template #avatar="{ row }">
          <div>
            <img :src="row.avatar" alt="" style="width: 50px; height: 50px" />
          </div>
        </template>
        <template #WeChat="{ row }">
          <div v-if="row.WeChat">
            <img :src="row.WeChat.url" alt="" style="width: 50px; height: 50px" />
          </div>
        </template>
        <template #center="{ row }">
          <Obutton :bttonData="row" @bClock="clickModify" @DataDel="DataDel"> </Obutton>
        </template>
      </tabs>
    </div>

    <!-- 弹出层 -->
    <el-dialog :visible.sync="dialogVisible" width="35%" :modal-append-to-body="false">
      <div class="wid-15">
        <dynamicForm :dataUire="formDictionary" :formData="formData"  v-if="dialogVisible">
          <template #center="{ row }">
              <div class="bodysButton flex">
                <div>
                  <el-button type="primary" size="small" @click="submit(row)">确认</el-button>
                </div>
                <div class="pl-10">
                  <el-button type="info" size="small" @click="dialogVisible = false">取消</el-button>
                </div>
              </div>
            </template>

        </dynamicForm>
      </div>
  
    </el-dialog>

  </div>
</template>

<script>
import { getDataUserList, createUser,updateUser } from "@/api/user";
import moment from "moment";
import { mateOrder, getCookie, findIndex } from "@/utils/util";
import md5 from 'js-md5'
export default {
  // inject: ["reload"],
  inject: {
    reload: {
      value: "reload",
      default: null,
    },
  },
  data() {
    return {
      fromData: {},
      tabData: {},
      tabHeader: [
        { key: "userName", name: "用户名" },
        { key: "openid", name: "用户标识" },
        { key: "nickName", name: "昵称" },
        { key: "slot", name: "头像", slotName: "avatar" },
        { key: "phone", name: "手机号" },
        { key: "integralFreeze", name: "商家积分冻结" },
        { key: "authority", name: "权限" },
        { key: "userTypeDisabled", name: "是否禁用" },
        { key: "slot", name: "微信收款图", slotName: "WeChat" },
        { key: "integral", name: "积分" },
        { key: "business", name: "商家权限" },
        { key: "createdAt", name: "创建时间" },
        { key: "updatedAt", name: "修改时间" },
      ],
      tabDate: [],
      DataDictionary: {},
      dialogVisible: !true,
      formData: {},
      formDictionary: [
        { key: "userName", name: "用户名", type: "text" },
        { key: "openid", name: "用户标识", type: "text", disabled: true },
        { key: "nickName", name: "昵称", type: "text" },
        { key: "phone", name: "手机号", type: "text" },
        { key: "authority", name: "权限", type: "select", children: [] },
        { key: "userTypeDisabled", name: "是否禁用", type: "select" },
        { key: "business", name: "商家权限", type: "select" },
      ]
    };
  },
  mounted() {
    this.getDataList();
    this.select_mFun()
  },
  methods: {
    // 删除
    DataDel(id){
      console.log(id);
    },
    // 修改
    async renewData(){
     await updateUser(this.formData.id,this.formData)
     this.$message({
          message: '修改成功',
          type: 'success'
        });
     this.reload()
    //  this.dialogVisible = false
    },
    submit(obj){
      if (!obj.id) return this.createUser(obj)
      this.renewData()
    },
    async createUser(formData) {
       await createUser(formData)
        this.$message({
          message: '添加成功',
          type: 'success'
        });
        this.formData = {}
        this.dialogVisible = false
        this.reload()
    },
    // 加载下拉框数据
    select_mFun() {
      let index = findIndex(this.formDictionary, "key", "authority")
      let user_role = getCookie("user_role")
      user_role = JSON.parse(user_role)
      this.formDictionary[index].children = user_role.map(item => {
        return {
          value: item.code,
          label: item.definition
        }
      })
      index = findIndex(this.formDictionary, "key", "userTypeDisabled")
      let mdse_dictionary = getCookie("mdse_dictionary");
      mdse_dictionary = JSON.parse(mdse_dictionary)
      mdse_dictionary = mdse_dictionary.map(item => {
        return {
          value: item.code,
          label: item.definition
        }
      })
      this.formDictionary[index].children = mdse_dictionary
      index = findIndex(this.formDictionary, "key", "business")
      this.formDictionary[index].children = mdse_dictionary

    },
    addDictionary() {
      let muns = Math.random().toString()
      this.dialogVisible = true
      this.formData.openid = md5(muns)
    },
    clickModify(e) {
      this.formData = e
      this.dialogVisible = true
    },
    // 字典处理
    Dictionary() {
      let user_role = getCookie("user_role")
      let mdse_dictionary = getCookie("mdse_dictionary");
      user_role = JSON.parse(user_role)
      mdse_dictionary = JSON.parse(mdse_dictionary)
      this.DataDictionary = {
        user_role, mdse_dictionary
      }
    },
    async getDataList() {
      this.Dictionary()
      let res = await getDataUserList();
      let DataD = this.DataDictionary

      this.tabDate = res.map((item) => {
        // 字典条件处理
        let authority = mateOrder(DataD.user_role, item.authority)
        let userTypeDisabled = mateOrder(DataD.mdse_dictionary, item.userTypeDisabled)
        item.authority = authority
        item.userTypeDisabled = userTypeDisabled;
        item.business = mateOrder(DataD.mdse_dictionary, item.business)
        // 时间处理
        item.createdAt = moment(item.createdAt).format("YYYY-MM-DD HH:mm:ss");
        item.updatedAt = moment(item.updatedAt).format("YYYY-MM-DD HH:mm:ss");
        // 头像处理
        if (item.WeChat) {
          item.WeChat = JSON.parse(item.WeChat);
          item.WeChat = item.WeChat[0];
        }
        return item;
      });
      console.log(this.tabDate);
    },
  },
};
</script>
<style scoped>
@import url("./../../assets/scss/index.css");

.bodys {
  flex-wrap: wrap;
}

.bodyStyle {
  border: 1px dashed rgb(0, 73, 62);
  padding: 0 2px;
}

.bodysButton button {
  width: 100px;
}
</style>